<template>
  <div>
    <div class="listBox" ref="listBox">
      <div
        v-for="(item, index) in List"
        :key="index"
        :class="getAlertClass(item.type)"
        class="list"
      >
        <span>
          {{ item.content }}
        </span>
        <el-image
          style="height: 30px"
          :src="item.image"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[item.image]"
          :initial-index="4"
          fit="cover"
        />

        <span class="time">{{ item.time }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

let List = ref([
  {
    type: "1",
    content: "Camera03-区域入侵",
    time: "2024年1月25号 20:01",
    image:
      "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
  },
  {
    type: "2",
    content: "Camera03-行李掉落",
    time: "2024年1月25号 20:03",
    image:
      "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
  },
  {
    type: "3",
    content: "Camera03-行李滞留",
    time: "2024年1月25号 20:11",
    image:
      "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
  },
  {
    type: "1",
    content: "Camera03-区域入侵",
    time: "2024年1月25号 20:22",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "1",
    content: "Camera03-区域入侵",
    time: "2024年1月25号 20:01",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "2",
    content: "Camera03-行李掉落",
    time: "2024年1月25号 20:03",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "3",
    content: "Camera03-行李滞留",
    time: "2024年1月25号 20:11",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "1",
    content: "Camera03-区域入侵",
    time: "2024年1月25号 20:22",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "1",
    content: "Camera03-区域入侵",
    time: "2024年1月25号 20:01",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "2",
    content: "Camera03-行李掉落",
    time: "2024年1月25号 20:03",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "3",
    content: "Camera03-行李滞留",
    time: "2024年1月25号 20:11",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "1",
    content: "Camera03-区域入侵",
    time: "2024年1月25号 20:22",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "1",
    content: "Camera03-区域入侵",
    time: "2024年1月25号 20:01",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "2",
    content: "Camera03-行李掉落",
    time: "2024年1月25号 20:03",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "3",
    content: "Camera03-行李滞留",
    time: "2024年1月25号 20:11",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "1",
    content: "Camera03-区域入侵",
    time: "2024年1月25号 20:22",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "1",
    content: "Camera03-区域入侵",
    time: "2024年1月25号 20:01",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "2",
    content: "Camera03-行李掉落",
    time: "2024年1月25号 20:03",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "3",
    content: "Camera03-行李滞留",
    time: "2024年1月25号 20:11",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
  {
    type: "1",
    content: "Camera03-区域入侵",
    time: "2024年1月25号 20:22",
    image:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  },
]);

const getAlertClass = (type: string) => {
  switch (type) {
    case "1":
      return "type-1";
    case "2":
      return "type-2";
    case "3":
      return "type-3";
    default:
      return "";
  }
};

const listBox = ref<HTMLElement | null>(null);

onMounted(() => {
  // setInterval(() => {
  //   if (listBox.value) {
  //     listBox.value.scrollTop += 1;
  //   }
  // }, 50);
});
</script>

<style lang="scss" scoped>
.listBox {
  overflow-y: auto;
  max-height: 350px;

  .list {
    height: 40px;
    line-height: 40px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    cursor: pointer;

    .time {
      color: #888;
    }
  }
}

.grid-item {
  padding: 10px;
  margin: 5px;
  transition: background-color 0.3s, transform 0.3s ease-out;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.grid-item:hover {
  background-color: #f0f0f0;
  transform: scale(1.05);
}

.type-1 {
  color: red;
}

.type-2 {
  color: blue;
}

.type-3 {
  color: green;
}
</style>
